<template>
  <div>

    <div class="appBox dispose">
      <div class="topPrompt">
        <h1 class="topTitle">
          注意：配置中心为全局控制(敏感操作区，全程记录日志)
        </h1>
        <h1 class="error flex_sb">
          <div>
            所有操作均需要操作密码验证后才可执行
          </div>
          <div class="tar mr50">
            <!-- <el-button v-preventReClick>取消</el-button> -->
            <el-button v-preventReClick
                       type="primary"
                       v-permission="1125"
                       @click="btnSub">确定</el-button>
          </div>
        </h1>
      </div>
      <h1>企业相关：</h1>
      <div class="flex ">
        <div class="ml50">
          <div class="info">未到岗天数</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn0"
                      clearable
                      size="large"
                      placeholder="请输入未到岗天数"
                      v-model="params.notWorkDays"><template #append>
                <div class="inputAppend"> 天</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">可欠费天数</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn0"
                      clearable
                      size="large"
                      placeholder="请输入可欠费天数"
                      v-model="params.debtDay"><template #append>
                <div class="inputAppend">天</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">月休假天数</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn0"
                      clearable
                      size="large"
                      placeholder="请输入每月个税"
                      v-model="params.vacation"><template #append>
                <div class="inputAppend">天</div>
              </template></el-input>
          </div>
        </div>
        <div class="flex1 tar btns">
          <el-button v-preventReClick
                     type="info"
                     v-permission="1126"
                     @click="btnEdit(0)">编辑</el-button>
        </div>
      </div>
      <div class="border"></div>
      <!-- <h1>提现配置：</h1>
      <div class="flex ">
        <div class="ml50">
          <div class="info">每日最大提现金额</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn1"
                      clearable
                      size="large"
                      placeholder="请输入每日最大提现金额"
                      v-model="params.maxMoneyDayWithdraw"><template #append>
                <div class="inputAppend"> 元</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">提现手续费用</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn1"
                      clearable
                      size="large"
                      placeholder="请输入提现手续费用"
                      v-model="params.withdrawCharge"><template #append>
                <div class="inputAppend">元/笔</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">每笔税率</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn1"
                      clearable
                      size="large"
                      placeholder="请输入每月个税"
                      v-model="params.taxRatio"><template #append>
                <div class="inputAppend">%</div>
              </template></el-input>
          </div>
        </div>
        <div class="flex1 tar btns">
          <el-button v-preventReClick type="info"
                     v-permission="1126"
                     @click="btnEdit(1)">编辑</el-button>
        </div>
      </div> -->
      <h1>打卡相关设置：</h1>
      <div class="flex flex-wrap">
        <div class="ml50">
          <div class="info">离职N天解除下级关系天数，解除下级关系 </div>
          <div class="mt20">
            <el-input :disabled="btnType.btn2"
                      clearable
                      placeholder="请输入N天解除下级关系天数"
                      size="large"
                      v-model="params.userPublic"><template #append>
                <div class="inputAppend"> 天</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">离职N天后无法获得下级奖励</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn2"
                      clearable
                      size="large"
                      placeholder="请输入N天后无法获得下级奖励"
                      v-model="params.noRewards"><template #append>
                <div class="inputAppend">天</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">企业入职扣款：人/次</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn2"
                      clearable
                      size="large"
                      placeholder="请输入企业入职扣款"
                      v-model="params.companyFee"><template #append>
                <div class="inputAppend">人/次</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">企业打卡扣款：人/次</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn2"
                      clearable
                      size="large"
                      placeholder="请输入企业入职扣款"
                      v-model="params.useFee"><template #append>
                <div class="inputAppend">人/次</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50 mt30">
          <div class="info">每个自然月可休假天数</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn2"
                      clearable
                      placeholder="请输入自然月可休假天数"
                      size="large"
                      v-model="params.vacation"><template #append>
                <div class="inputAppend">天</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50 mt30">
          <div class="info">设置打卡状态和提现时间（再此范围内可以提现和设置打卡状态）</div>
          <div class="mt20 flex">
            <el-time-picker v-model="params.signStartTime"
                            :disabled="btnType.btn2"
                            clearable
                            format="HH:mm"
                            value-format="HH:mm"
                            size="large"
                            placeholder="选择开始时间" />
            <el-time-picker class="ml20"
                            v-model="params.signEndTime"
                            :disabled="btnType.btn2"
                            format="HH:mm"
                            value-format="HH:mm"
                            size="large"
                            clearable
                            placeholder="选择结束时间" />
          </div>
        </div>
        <div class="flex1 tar btns">
          <el-button v-preventReClick
                     type="info"
                     @click="btnEdit(2)"
                     v-permission="1127">编辑</el-button>
        </div>
      </div>
      <h1>公海池设置：</h1>
      <div class="flex ">
        <div class="ml50">
          <div class="info">公海池最大可认领人数 </div>
          <div class="mt20">
            <el-input clearable
                      :disabled="btnType.btn3"
                      placeholder="请输入公海次最大可认领人数"
                      size="large"
                      v-model="params.maxInvite"><template #append>
                <div class="inputAppend"> 人</div>
              </template></el-input>
          </div>
        </div>

        <div class="flex1 tar btns">
          <el-button v-preventReClick
                     type="info"
                     v-permission="1128"
                     @click="btnEdit(3)">编辑</el-button>
        </div>
      </div>
      <h1>奖励相关设置：</h1>
      <div class="flex flex-wrap">
        <div class="ml50">
          <div class="info">每月首次入职奖励</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn4"
                      clearable
                      size="large"
                      placeholder="请输入每月首次入职奖励"
                      v-model="params.fitstPrize"><template #append>
                <div class="inputAppend"> 元</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">下级打卡获得奖励</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn4"
                      clearable
                      size="large"
                      placeholder="请输入下级打卡获得奖励"
                      v-model="params.below1"><template #append>
                <div class="inputAppend">元</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50 ">
          <div class="info">下级考勤获得奖励</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn4"
                      clearable
                      placeholder="请输入下级考勤获得奖励"
                      size="large"
                      v-model="params.below1_persistence"><template #append>
                <div class="inputAppend">元</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">下下级打卡获得奖励</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn4"
                      clearable
                      placeholder="请输入下下级打卡获得奖励"
                      size="large"
                      v-model="params.below2"><template #append>
                <div class="inputAppend">元</div>
              </template></el-input>
          </div>
        </div>

        <div class="ml50 mt20">
          <div class="info">下下级考勤获得奖励</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn4"
                      clearable
                      placeholder="请输入下下级考勤获得奖励"
                      size="large"
                      v-model="params.below2_persistence"><template #append>
                <div class="inputAppend">元</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50 mt20">
          <div class="info">入职补贴间隔时长(N天内，最多可获得一次入职补贴)</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn4"
                      clearable
                      placeholder="请输入入职补贴间隔时长"
                      size="large"
                      v-model="params.fitstPrizeDay"><template #append>
                <div class="inputAppend">天</div>
              </template></el-input>
          </div>
        </div>
        <div class="flex1 tar btns">
          <el-button v-preventReClick
                     type="info"
                     v-permission="1129"
                     @click="btnEdit(4)">编辑</el-button>
        </div>
      </div>
      <h1>招聘相关设置：</h1>
      <div class="flex ">
        <div class="ml50">
          <div class="info">投递岗位后,招聘方未处理情况下再次投递的时间</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn5"
                      clearable
                      size="large"
                      placeholder="请输入投递的时间"
                      v-model="params.reSubmitTime"><template #append>
                <div class="inputAppend"> 天</div>
              </template></el-input>
          </div>
        </div>
        <div class="ml50">
          <div class="info">面试后招聘方未处理面试结果，自动释放简历</div>
          <div class="mt20">
            <el-input :disabled="btnType.btn5"
                      clearable
                      size="large"
                      placeholder="请输入释放简历天数"
                      v-model="params.meetExpireTime"><template #append>
                <div class="inputAppend">天</div>
              </template></el-input>
          </div>
        </div>

        <div class="flex1 tar btns">
          <el-button v-preventReClick
                     type="info"
                     v-permission="1130"
                     @click="btnEdit(5)">编辑</el-button>
        </div>
      </div>

    </div>
    <el-dialog v-model="dialogVisible"
               title="请输入操作密码"
               :width="$px2rem('500px')">
      <div class="mt50 mb50 flex_c">
        <el-input style="width: 250px;"
                  v-model="password"
                  clearable
                  show-password
                  type="password"
                  placeholder="请输入操作密码"></el-input>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-preventReClick
                     @click="dialogVisible = false">取消</el-button>
          <el-button v-preventReClick
                     type="primary"
                     @click="passCheck">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  getCurrentInstance,
  ref,
  toRefs,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  components: {
  },
  setup () {
    const app = getCurrentInstance()?.proxy;
    const router = useRouter();
    const route = useRoute();
    const initState = () => {
      return {
        params: {
        },
        password: '',
        btnType: {
          btn0: true,
          btn1: false,
          btn2: true,
          btn3: true,
          btn4: true,
          btn5: true,
        },
        type: null,
        dialogVisible: false,
        data: {},
      };
    };
    const state = reactive(initState());
    onMounted(() => {
      methods.getList()
    });
    const methods = {
      getList () {
        app.$get('/sysconfig/queryConfigByTypeOrId?type=0&cid=&pid=').then(res => {
          if (res.code == 200) {
            for (let i of res.data) {
              state.params[i.filedKey] = i.filedValue
            }
            state.data = res.data
          }
        })
      },
      btnEdit (i) {
        state.dialogVisible = true
        state.type = i
      },
      passCheck () {
        if (state.password == '') {
          ElMessage({
            message: '请输入操作密码',
            type: 'error'
          })
          return
        }
        app.$post('/sysconfig/checkPassword', { usePassword: state.password }).then(res => {
          console.log(res);
          if (res.code == 200) {
            ElMessage({
              message: '验证成功',
              type: 'success'
            })
            state.password = ''
            if (state.type == 0) {
              state.btnType.btn0 = false
              state.dialogVisible = false
              return
            }
            if (state.type == 1) {
              state.btnType.btn1 = false
              state.dialogVisible = false
              return
            }
            if (state.type == 2) {
              state.btnType.btn2 = false
              state.dialogVisible = false
              return
            }
            if (state.type == 3) {
              state.btnType.btn3 = false
              state.dialogVisible = false
              return
            }
            if (state.type == 4) {
              state.btnType.btn4 = false
              state.dialogVisible = false
              return
            }
            if (state.type == 5) {
              state.btnType.btn5 = false
              state.dialogVisible = false
              return
            }
          }
        })
      },
      btnSub () {
        let dataAtt = state.data.map(a => a.filedKey)
        for (let k in state.params) {
          if (dataAtt.includes(k) == false) {
            state.data.push({ filedKey: k, filedValue: state.params[k] })
          }

        }
        for (let i of state.data) {
          for (let k in state.params) {
            if (i.filedKey == k) {
              i.filedValue = state.params[k]
            }
          }
        }
        console.log(state.data);
        app.$post('/sysconfig/saveorupdate', {
          type: 0,
          content: state.data
        }).then(res => {
          console.log(res);
          if (res.code == 200) {
            ElMessage({
              message: '已修改',
              type: 'success'
            })
            state.btnType.btn0 = true
            state.btnType.btn1 = true
            state.btnType.btn2 = true
            state.btnType.btn3 = true
            state.btnType.btn4 = true
            methods.getList()

          }
        })
      },

    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.topPrompt {
  position: sticky;
  top: -20px;
  z-index: 2;
  background: #fff;
}
::v-deep(.el-input__wrapper) {
  width: 220px;
}

.dispose {
  overflow: auto;
  height: calc(100% - 20px);
  padding: 20px 40px 40px;
  .border {
    width: 100%;
    height: 2px;
    background: #fff;
  }
  .inputAppend {
    width: 26px;
    text-align: center;
  }
  .btns {
    margin-right: 50px;
    margin-top: 36px;
  }
}
.topTitle {
}
</style>